0
190
Views¿Cómo dibujar una línea punteada en forma de "L", cuando el acordeón está abierto?
import BaseAccordian from "@/components/BaseAccordion"; export default { components: { BaseAccordian, }, data() { return { accordions: [ { title: "Vue", text: "AllaboutVue", textwo: "hi", }, { title: "Nuxt", text: "AllaboutNuxt", textwo: "hi", }, { title: "webpack", text: "Allaboutwebpack", textwo: "hi", }, ], }; }, }; .green { color: green; font-weight: bold; } .red { color: red; font-weight: bold; } .pink { color: pink; font-weight: bold; } <div> <div v-for="accordion in accordions" :key="accordion.title" :class="{ green: accordion.text === 'AllaboutVue', red: accordion.textwo === 'hi', red: accordion.text === 'AllaboutNuxt', pink: accordion.text === 'Allaboutwebpack', }" > <BaseAccordian> <template v-slot:title>{{ accordion.title }}</template> <template v-slot:content> <div>{{ accordion.text }}</div> <div>{{ accordion.textwo }}</div> </template> </BaseAccordian> </div> </div>Ya configuré los colores para diferentes textos, cuando el acordeón está abierto, ahora necesito dibujar líneas de puntos con contenido. Para que dibuje una línea de puntos basada en el color del contenido.
Estoy pensando que es posible con css.
Ya configuré los colores para diferentes textos, cuando el acordeón está abierto, ahora necesito dibujar líneas de puntos con contenido. Para que dibuje una línea de puntos basada en el color del contenido.
Estoy pensando que es posible con css.
·
Juan Pablo Isaza
1 answers
Answer question0
Para obtener un diseño como:
Simplemente agregue a su:
<div v-for="accordion in accordions" :key="accordion.title" :class="{ green: accordion.text === 'AllaboutVue', red: accordion.textwo === 'hi', red: accordion.text === 'AllaboutNuxt', pink: accordion.text === 'Allaboutwebpack', }" > clase, por ejemplo, line :
<div v-for="accordion in accordions" :key="accordion.title" class="line" :class="{ green: accordion.text === 'AllaboutVue', red: accordion.textwo === 'hi', red: accordion.text === 'AllaboutNuxt', pink: accordion.text === 'Allaboutwebpack', }" >Luego agrega algunos estilos:
.line >>> .content > div { --line-width: 2px; --x-offset: 8px; --x-width: 120px; position: relative; padding-bottom: var(--line-width); } .line >>> .content > div:before { content: ""; display: block; position: absolute; bottom: 0; left: var(--x-offset); width: var(--x-width); height: 100%; border-left: var(--line-width) dashed currentColor; border-bottom: var(--line-width) dashed currentColor; } .line >>> .content > div:after { content: ""; display: block; position: absolute; bottom: calc(-1 * var(--line-width) * 1.75); left: calc(var(--x-offset) + var(--x-width)); width: 0; height: 0; border: calc(var(--line-width) * 2.5) solid transparent; border-right: 0; border-left: calc(var(--line-width) * 5) solid currentColor; }
·
Juan Pablo Isaza
Report
Answer question